<template>
	<view class="content-baisc-layout u-flex-col">
		<u-sticky :h5-nav-height="0" bg-color="#FFFFFF">
			<view class="u-flex u-padding-bottom-15 u-padding-top-25 bg-white">
				<view style="background: #EEE;" class="u-flex-1 search-area u-flex u-margin-left-25 u-margin-right-25 u-padding-left-20 u-padding-right-20">
					<u-icon name="search" :size="30" color="#86909C"></u-icon>
					<u-input class="u-padding-left-20" placeholder-style="color:rgba(0,0,0,.2);" placeholder="请输入搜索关键词" />
				</view>
			</view>
			<commonTab class="u-padding-bottom-10 bg-white " style="box-shadow: 0 20rpx 20rpx #eee;" :nowCurrent="2"></commonTab>
		</u-sticky>
		<scroll-view scroll-y @scrolltolower="loaderMoreDatas" class="main-content-area u-flex-1 u-flex-col u-margin-top-25 u-padding-top-15">
			<u-tabs
				:height="100"
				:bar-width="120"
				:bar-height="11"
				@change="change"
				:list="tabsLists"
				:current="current"
				:is-scroll="false"
				active-color="#52B9FE"
				bg-color="transparent"
				:active-item-style="{
					color:'#000000',
					fontWeight:500
				}"
				></u-tabs>
			<!-- 轮播图 -->
			<swipers :pid="13" height="166rpx" padding="30rpx 30rpx"></swipers>
			
			<scroll-view v-if="current == 0" class="classify-area u-padding-top-25 u-padding-bottom-25" scroll-x>
				<view class="u-flex">
					<view class="classify-item u-color-666666" @click="selectClassify(-1)"
						:class="{'classify-select':nowSelectClassifyKey == -1}">
						全部
					</view>
					<view v-for="(v,k) in classifyDatas" :key="k" @click="selectClassify(k)"
						:class="{'classify-select':nowSelectClassifyKey == k}" class="classify-item u-color-666666">
						{{v.name||''}}
					</view>
				</view>
			</scroll-view>
			
			<view class="bg-white">
				<view v-for="(v,k) in articleList" :key="k"
					class="article-item u-padding-32 u-flex u-border-bottom u-col-top">
					<u-avatar :src="userInfo.avatar" :size="81"></u-avatar>
					<view class="u-padding-left-20 u-flex-1">
						<view class="bold lg">{{userInfo.nickname||''}}</view>
						<view class="nr content u-margin-top-10">
							<text >{{v.synopsis||''}}</text>
						</view>
						<view class="image-show-area u-padding-top-15 u-margin-bottom-32">
							<image v-if="v.image" :src="v.image" class="image-item" mode="aspectFill" @click="showPoster(v)"></image>
							<image v-for="(item,index) in v.images" :src="item" :key="index" class="image-item"
								mode="aspectFill" @click="previewImage(v.images,index)"></image>
						</view>
						<view class="u-flex u-row-between xs">
							<view class="u-type-info-dark">{{v.create_time}}</view>
							<view class="copy-btn" @click="oncopy(v)">
								复制文案
							</view>
						</view>
					</view>
				</view>
				<view v-if="articleList.length <= 0" class="u-padding-top-40">
					<u-empty text="暂无内容" mode="list"></u-empty>
				</view>
			</view>
		</scroll-view>

		<invite-poster v-if="renderPoster" :isShowImagee="false" :config="{
			link: link,
			qrCode: qrCode,
			poster: posterDatas.image,
			bottom: posterDatas.qr_code_x || 10,
			right: posterDatas.qr_code_y || 10,
			width: posterDatas.qr_code_w || 180,
			height: posterDatas.qr_code_h || 180,
		}" @loaderSuccess="posterLoaderSuccess" />
	</view>
</template>

<script>
	import {
		loadingType
	} from '@/utils/type';
	import {
		copy,
		loadingFun
	} from '@/utils/tools'
	import {
		queryPromotionArticleListsDatats
	} from '@/api/store'
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		getArticleList,
		getCategoryList,
		updateArticleDatas
	} from '@/api/publicArticle'
	import Cache from "@/utils/cache";
	import wechath5 from '@/utils/wechath5'
	import commonTab from '@/yixu/pages/article_acquisition/components/common_tab.vue'
	export default {
		components: {
			commonTab
		},
		data() {
			return {
				cid: '',
				page: 1,
				keyword: '',
				current: 0,
				tabsLists: [{
					name: '推广产品素材'
				}, {
					name: '推广团队素材'
				}],
				qrCode: '',
				articleList: [],
				renderPoster: false,
				posterDatas: {},
				status: loadingType.LOADING,
				classifyDatas: [],
				nowSelectClassifyKey: -1,
			};
		},
		async onLoad() {
			let {
				code,
				data
			} = await getCategoryList({
				type: 4
			})
			this.classifyDatas = data;
			
			this.getUser();
			// #ifdef MP-WEIXIN
			this.getMnpQrCode()
			// #endif
			this.loaderPromotionArticleListsDatatsFun()
			uni.$once('h5ShareSetFinished',function(w,o){
				o.shareTitle = '业务素材';
				o.shareDesc = '业务素材';
				w.share(o)
			})
		},
		onReachBottom() {
			this.loaderPromotionArticleListsDatatsFun()
		},
		onShareAppMessage() {
			const shareInfo = Cache.get("shareInfo");
			return {
				title: '业务素材',
				path: "yixu/pages/friends/lists?invite_code=" + this.inviteCode,
				imageUrl: shareInfo.mnp_share_image,
			};
		},
		onShareTimeline() {
			const shareInfo = Cache.get("shareInfo");
			return {
				title: '业务素材',
				path: "yixu/pages/friends/lists?invite_code=" + this.inviteCode,
				imageUrl: shareInfo.mnp_share_image,
			};
		},
		methods: {
			...mapActions(['getUser']),
			selectClassify(k) {
				this.nowSelectClassifyKey = k
				this.clearDatas()
			},
			clearDatas() {
				this.page = 1;
				this.articleData = [];
				this.status = loadingType.LOADING
				this.loaderPromotionArticleListsDatatsFun()
			},
			backPage(){
				uni.navigateBack({
					fail:()=>{
						uni.redirectTo({
							url:'/yixu/pages/article_acquisition/index'
						})
					}
				})
			},
			searchClient() {
				this.clearDatas();
				this.loaderPromotionArticleListsDatatsFun()
			},
			change(e) {
				this.current = e;
				this.clearDatas();
				this.loaderPromotionArticleListsDatatsFun()
			},
			clearDatas() {
				this.page = 1;
				this.articleList = [];
				this.status = loadingType.LOADING;
			},
			loaderMoreDatas() {
				this.loaderPromotionArticleListsDatatsFun()
			},
			loaderPromotionArticleListsDatatsFun() {
				let {
					cid,
					page,
					current,
					articleList,
					status,
					keyword
				} = this;
				loadingFun(getArticleList, page, articleList, status, {
					type: 4,
					keyword,
					current:current,
					cid: this.$u.test.isEmpty(this.classifyDatas[this.nowSelectClassifyKey]) ? 0 : this.classifyDatas[
						this.nowSelectClassifyKey].id
				}).then(res => {
					if (res) {
						this.page = res.page;
						this.articleList = res.dataList
						this.status = res.status
					}
				})
			},
			previewImage(urls, current = 0) {
				console.log(11)
				uni.previewImage({
					current,
					showmenu: true,
					urls,
					indicator: 'default',
					fail(e) {
						console.log(e)
					}
				})
			},
			getMnpQrCode() {
				getShareMnQrcode({
						id: '', // 商品id或其他活动id
						url: 'pages/index/index', // 跳转页面路径
						type: 0, // 0-会员分享海报 1-商品详情 2-砍价活动
					})
					.then((res) => {
						this.qrCode = res.data.qr_code
					})
			},
			showPoster(e) {
				uni.showLoading({
					title: '海报渲染中'
				})
				this.posterDatas = e;
				this.renderPoster = true;
			},
			posterLoaderSuccess(e) {
				this.previewImage([
					e
				])
				uni.hideLoading()
				this.renderPoster = false;
			},
			oncopy(e) {
				uni.setClipboardData({
					data: e.synopsis
				});
			}
		},
		computed: {
			...mapGetters(["userInfo","inviteCode"]),
			link() {
				return `https://dtm.lanbaozixun.com/mobile/pages/index/index?invite_code=${this.inviteCode}`
			}
		}
	}
</script>

<style lang="scss">
	page {
		min-height: 100vh;
		background: #F2F2F2;
		// background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(224, 242, 255, 1) 23.69%, rgba(156, 215, 255, 1) 72.53%, rgba(120, 201, 255, 1) 100%);


		.content-baisc-layout {
			min-height: 100vh;
			
			.search-area{
				border-radius: 100rpx;
				background-color: rgba(255, 255, 255, 0.8);
			}
			
			.main-content-area{
				overflow: hidden;
				border: 2rpx solid white;
				border-radius: 32rpx 32rpx 0 0;
				background: white;
				// background: linear-gradient(176.92deg, rgba(214, 238, 255, 1) 0%, rgba(255, 255, 255, 1) 54.75%, rgba(242, 242, 242, 1) 100%);
			
				
				.classify-area{
					margin: 0 35rpx;
					width: calc(100vw - 70rpx);
					
					
					.classify-item{
						flex-shrink: 0;
						color: #666666;
						padding: 8rpx 24rpx;
						display: inline-block;
						border-radius: 10rpx;
						margin-right: 16rpx;
						background: rgba(26, 26, 26, 0.06);
					}
					
					.classify-select{
						color: white;
						background: #2DAAFF;
					}
				}
			}
			
	

			.content {
				line-height: 1.5;
			}

			.image-item {
				width: 90%;
				height: 160rpx;
			}

			.copy-btn {
				color: #99d6fe;
				height: 60rpx;
				padding: 0 24rpx;
				line-height: 60rpx;
				border-radius: 12rpx;
				background: rgba(153, 214, 254, .1);
				border: 2rpx solid #99d6fe;
			}
		}
		
		.image-show-area{
			display: grid;
			row-gap: 20rpx;
			column-gap: 5rpx;
			grid-template-columns: 1fr 1fr 1fr;
			
			.image-item{
				border: 6rpx solid #F5F5F5;
				border-radius: 10rpx;
			}
		}
	}
</style>